import { scXY } from '@/util/scaleXY'

export abstract class AbstractDraw {
  constructor(protected ctx: CanvasRenderingContext2D, protected startY: number) {}
  public abstract draw(): void

  protected drawline(p1: [number, number], p2: [number, number], lineWidth: number = 2, color: string = 'gray') {
    this.ctx.beginPath()
    this.ctx.moveTo(...p1)
    this.ctx.lineTo(...p2)
    this.ctx.lineWidth = lineWidth
    this.ctx.strokeStyle = color
    this.ctx.stroke()
  }

  protected drawText(
    txt: string,
    po: [number, number],
    color = 'black',
    align: CanvasTextAlign = 'center',
    baseLine: CanvasTextBaseline = 'middle',
  ) {
    this.ctx.beginPath()
    this.ctx.font = 'Italic 10px 微软雅黑'
    this.ctx.fillStyle = color
    this.ctx.textAlign = align
    this.ctx.textBaseline = baseLine
    this.ctx.fillText(txt, ...po)
  }

  // 绘制多段线
  protected drawPolyline(pos: [x: number, y: number][], color = 'black', lineWidth = 2) {
    const newPos = []
    for (const po of pos) {
      newPos.push(this.scaleXY(...po))
    }

    this.ctx.beginPath()
    this.ctx.moveTo(...newPos[0])
    for (let index = 1; index < newPos.length; index++) {
      this.ctx.lineTo(...newPos[index])
    }
    this.ctx.strokeStyle = color
    this.ctx.lineWidth = lineWidth
    this.ctx.stroke()
  }

  protected drawCircle(po: [number, number], r: number, color = 'black') {
    this.ctx.beginPath()
    this.ctx.arc(...po, r, 0, 2 * Math.PI)
    this.ctx.strokeStyle = color
    this.ctx.stroke()
  }

  protected drawFillCircle(po: [number, number], r: number, color = 'black') {
    this.ctx.beginPath()
    this.ctx.arc(...po, r, 0, 2 * Math.PI)
    this.ctx.fillStyle = color
    this.ctx.fill()
  }

  /**
   * 转换坐标
   * @param x x的坐标
   * @param y y的坐标
   * @returns 数组
   */
  protected scaleXY(x: number, y: number): [number, number] {
    return scXY(x, y, this.startY)
  }
}
